<template>
  <div>
    <el-dialog title="设置公司标签" :visible.sync="esitTagBoolean" width="40%" custom-class="dialogClass"
      :before-close="handleClose">
      <span> 增加公司标签，提升公司诱人指数 &nbsp;&nbsp; (最多可选择&nbsp;<span style="color:#0093FF;"> 8 </span>&nbsp;个)</span>
      <el-scrollbar>
        <div class="companyTag">
          <div class="tag" :class="{selectTagClass: item.bOn}" v-for="(item, index) in tagArr" :key="index"
            @click="checkTag(item, index)">
            {{item.data ||item.name}}
            <span v-if="item.bOn">
              <img src="../../../../assets/img/tag_jiaobiao.png" alt="">
            </span>
          </div>
          <!-- <div class="tag custom">
                     <span class="esitTag"><img src="../../../../assets/img/add_tag.png" alt="">自定义</span>
                </div> -->
        </div>
      </el-scrollbar>
      <hr>
      <div class="tag-group">
        <span class="tag-group__title">已选择：</span>
        <div class="elTag">
          <el-tag v-for="(item,index) in haveTag" :key="index" closable @close="closeTag(item)" size="medium"
            effect="plain">
            {{ item.name }}
          </el-tag>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="center">取 消</el-button>
        <el-button type="primary" @click="confirm">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
.companyTag {
    margin-top: 10px;
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    flex-direction: row;
    max-height: 337px;
}
.companyTag .tag {
    min-width: 100px;
    height: 23px;
    display: inline-block;
    padding: 3px 20px;
    margin: 8px 6px;
    border: 1px solid rgba(232, 232, 232, 1);
    border-radius: 4px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    text-align: center;
    line-height: 23px;
    cursor: pointer;
    color: rgba(85, 85, 85, 1);
}
.selectTagClass {
    border: 1px solid rgba(24, 147, 252, 1) !important;
    position: relative;
}
.selectTagClass span img {
    width: 10px;
    height: 10px;
    position: absolute;
    right: 0;
    bottom: 0;
}
hr {
    margin: 23px 0;
    background: #e8e8e8;
}

.tag-group {
    display: flex;
}
.tag-group__title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
}

.elTag {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 75%;
}
.elTag /deep/ .el-tag--plain {
    margin: 0px 10px 16px;
    padding: 0 5px;
    font-size: 12px;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 400;
    /* padding: 2px 0; */
    color: rgba(24, 147, 252, 1);
}

.dialog-footer button {
    width: 120px;
    height: 34px;
}
.dialog-footer .el-button--default {
    margin-right: 20px;
}
/* 自定义 */
.custom .esitTag {
    display: flex;
    align-items: center;
    color: #0093ff;
}
.custom .esitTag img {
    margin: 0 5px;
}
</style>
<style>
.dialogClass .el-dialog__header {
    border-bottom: 1px solid rgba(0, 147, 255, 1);
}
.dialogClass .el-dialog__headerbtn .el-dialog__close {
    color: rgba(0, 147, 255, 1);
}
.dialogClass .el-dialog__title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(34, 34, 34, 1);
}
.dialogClass .el-dialog__body {
    padding: 10px 30px;
}
</style>

<script>
// 福利标签
import { getListTag } from '../../../../api/jobfair';
export default {
  name: 'setCompanyLabel',
  props: {
    esitTagBoolean: {
      type: Boolean,
      default: false
    },
    allure: Array
  },
  watch: {
    allure: {
      handler (newName, oldName) {
        this.haveTag = newName
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      //   弹框默认隐藏
      // esitTagBoolean: false,
      // 选择标签索引
      selectTagIndex: -1,
      // 标签数据
      tagArr: [
        { city: "北京北京北", bOn: false, id: 1 }
      ],
      // 已选择标签
      haveTag: []
    }
  },
  methods: {
    handleClose (done) {
      this.$emit('close', false)
      this.closeAll()
    },
    center () {
      this.$emit('close', false)
      this.closeAll()
    },
    confirm () {
      this.$emit('confirmHaveTag', this.haveTag)
      //   this.closeAll()
    },
    //  多选标签
    checkTag (val, index) {
      console.log(val, index)
      this.tagArr[index].bOn = !this.tagArr[index].bOn;
      if (this.haveTag.length >= 8 && val.bOn) {
        this.tagArr[index].bOn = !this.tagArr[index].bOn;
        this.$message({
          message: '最多可添加8个',
          type: 'warning'
        });
        return false
      }
      // includes 暂时不用
      // if (this.haveTag.includes(val)) {
      // 用于这个个与判断 这大数组俩面有无这个对象v
      let flag = false
      this.haveTag.map((item, i) => {
        if (item.val == val.val) {
          flag = true
          this.haveTag.splice(i, 1)
        }
      })
      if (!flag) {
        this.haveTag.push(val);

        //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
        //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
        // this.haveTag = this.haveTag.filter(function (ele) { return ele != val; });
        // this.haveTag = this.haveTag.filter(item => item.val === 2)
        //this.arr=this.arr.filter((ele)=>ele!=i);
        //filter()为假时删除
      }
    },
    //  关闭已选择的标签
    closeTag (velData) {
      let that = this
      console.log(velData)
      // that.haveTag = that.haveTag.filter(function (ele) { return ele != velData; });
      // if (this.haveTag.indexOf(velData) != -1) {
      //   this.haveTag.splice(this.haveTag.indexOf(velData), 1)
      // }
      this.haveTag.map((item, i) => {
        if (item.val == velData.val) {
          this.haveTag.splice(i, 1)
        }
      })
      // if (that.tagArr.includes(velData)) {
      // that.tagArr = that.tagArr.filter(function (ele){return ele != velData;});
      // velData.bOn = false
      // that.tagArr.push(velData)
      that.tagArr.map((v, i) => {
        console.log(i)
        if (v.val === velData.val) {
          velData.bOn = false
          v.bOn = false
        }
      })
      // }
    },
    closeAll () {
      this.tagArr.map((v, i) => {
        v.bOn = false
      })
      this.haveTag = []
    },
    getListTag () {
      let that = this
      getListTag().then((res) => {
        if (res.success) {
          let datas = res.data.allure
          if (that.allure.length > 0) {
            //  针对后台返回的数据格式 过滤成组件想要的格式 因为后台获取的数据格式 和返回的数据格式完全不一样，所以需要前端再次处理一下
            let newArr = []
            that.allure.map((item) => {
              let newObj = {}
              newObj.code = "allure"
              newObj.name = item.data || item.name
              newObj.val = Number(item.val)
              newObj.bOn = false
              newArr.push(newObj)
            })
            that.haveTag = newArr
            datas.map((item) => {
              that.allure.map((v) => {
                if (item.val == v.val) {
                  item.bOn = true
                }
              })
            })
          }
          that.tagArr = datas
          console.log(datas, '7894564654')
        } else {
          that.$message.error(res.msg)
        }
      })
    }
  },
  created () {
    this.getListTag()
  }
};
</script>